<script setup lang="ts">
import homeApi from '@/service/api/home'
import { userList } from '@/hooks/useList'

type PropsState = {
  authorId: string | number | null
  releaseid: string | number | null
  tags: string[] | null
}
const props = withDefaults(defineProps<PropsState>(), {
  authorId: null,
  releaseid: null,
  tags: null
})
const emit = defineEmits(['check'])

const handDetail = (e: any) => {
  emit('check', e)
}
const getApi = async (params: any) => {
  const res = await homeApi.list(params)
  res.data = res.data.data
  return res
}
const { queryForm, status, tableData, onBottom, onRefresh } = userList({
  apis: {
    getApi
  },
  initForm: {
    author_id: null,
    releaseid: null,
    current: 1,
    id: null,
    institution_id: null,
    keyword: '',
    order: 'view',
    orderType: 'desc',
    size: 18,
    tags: null,
    sortType: 1
  }
})

const init = () => {
  queryForm.value.author_id = props.authorId
  queryForm.value.releaseid = props.releaseid
  console.log(props.releaseid)
  if (props.tags) {
    queryForm.value.tags = props.tags.map(el => {
      return el.name
    })
  }
  onRefresh()
}
defineExpose({
  onBottom,
  init
})
</script>

<template>
  <div class="works-list">
    <div
      class="works-card"
      v-for="item in tableData"
      :key="item.id"
      @click="handDetail(item)"
    >
      <img v-lazy="$getImg(item.cover)" alt="" />
      <div class="con">
        <i class="esayIcon esayIcon-aixin"></i>
        <span>{{ item.coll_count }}</span>
      </div>
    </div>
  </div>
  <template v-if="status !== 'nomore'">
    <div class="loading">加载中...</div>
  </template>
</template>

<style scoped lang="scss">
.loading {
  text-align: center;
  font-size: 13px;
}

.works-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 10px 0;

  .works-card {
    width: 100%;
    height: 100px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    cursor: pointer;

    img {
      width: 100%;
      height: 100px;
      object-fit: cover;
      transition: all 0.3s;
    }

    .con {
      position: absolute;
      width: 100%;
      bottom: 0;
      left: 0;
      box-sizing: border-box;
      padding: 20px 10px 0 10px;
      background-image: linear-gradient(
        transparent 0%,
        rgba(0, 0, 0, 0.5) 100%
      );

      i {
        font-size: 12px;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
      }

      span {
        font-size: 12px;
        margin-left: 3px;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
      }
    }

    &:hover {
      img {
        transform: scale(1.1);
      }
    }
  }
}
</style>
